<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="定期产品名称">
        <el-input
          v-model="regular.fname"
          placeholder="请输入定期产品名称 例:齐鲁锦泉28天"
        />
      </el-form-item>

      <el-form-item label="定期产品类型">
        <el-input
          v-model="regular.typeName"
          placeholder="请输入定期产品类型 例:券商资管"
        />
      </el-form-item>
      <!-- 预售头像：TODO -->
      <el-form-item label="预售状态图片">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="regular.picUrl" />
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imagecropperShow1 = true"
          >上传图片
        </el-button>
        <!--v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
        <image-cropper
          v-show="imagecropperShow1"
          :width="70"
          :height="70"
          :key="imagecropperKey1"
          :url="BASE_API + '/minio/upload/images'"
          field="file"
          @close="close1"
          @crop-upload-success="cropSuccess1"
        />
      </el-form-item>
      <el-form-item label="售罄状态图片">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="regular.endPicUrl" />
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imagecropperShow2 = true"
          >上传图片
        </el-button>
        <image-cropper
          v-show="imagecropperShow2"
          :width="70"
          :height="70"
          :key="imagecropperKey2"
          :url="BASE_API + '/minio/upload/images'"
          field="file"
          @close="close2"
          @crop-upload-success="cropSuccess2"
        />
      </el-form-item>
      <el-form-item label="权重">
        <el-input-number
          v-model="regular.weight"
          controls-position="right"
          :min="0"
        />请填写权重值,数字越大越热门
      </el-form-item>
      <el-form-item label="交易截止时间">
        <el-input-number
          v-model="regular.endHour"
          controls-position="right"
          :min="1"
          :max="23"
        />1-23之间的整点数,超过该点购买顺延至下一交易日确认
      </el-form-item>

      <el-form-item label="资金到账时间">
        <el-input-number
          v-model="regular.accountingDate"
          controls-position="right"
          :min="1"
        />请输入交易到账时间(整数交易日)
      </el-form-item>

      <el-form-item label="延期买入天数">
        <el-input-number
          v-model="regular.delayDay"
          controls-position="right"
          :min="0"
        />请输入延期买入的交易日天数(整数交易日)
      </el-form-item>

      <el-form-item label="最低投资金额">
        <el-input-number
          v-model="regular.minimumMoney"
          controls-position="right"
          :min="100"
        />请输入最低投资金额(整数,最低100)
      </el-form-item>

      <el-form-item label="平台抽成比例">
        <el-input-number
          v-model="regular.deduct"
          controls-position="right"
          :min="0"
          :max="100"
        />请输入平台抽成比例,百分比(整数,最低0,最高100)
      </el-form-item>

      <el-form-item label="产品投资周期">
        <el-input-number
          v-model="regular.period"
          controls-position="right"
          :min="1"
        />请输入产品投资周期(单位天,最低1)
      </el-form-item>

      <el-form-item label="产品总份数">
        <el-input-number
          v-model="regular.sumCount"
          controls-position="right"
          :min="1"
        />请输入产品总份数(最低1)
      </el-form-item>
      <el-form-item label="基金经理">
        <el-select
          v-model="regular.fundManagerId"
          filterable
          clearable
          placeholder="请选择基金经理"
        >
          <el-option
            v-for="item in managetList"
            :key="item.mid"
            :label="item.mname"
            :value="item.mid"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="产品风险等级">
        <el-select
          v-model="regular.riskGrade"
          filterable
          clearable
          placeholder="请选择产品风险等级"
        >
          <el-option
            v-for="item in riskGradeList"
            :key="item.grade"
            :label="item.gDescription"
            :value="item.grade"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户持有时间">
        <el-select
          v-model="regular.wealthDeadline"
          filterable
          clearable
          placeholder="请选择用户持有时间描述"
        >
          <el-option
            v-for="item in ownDateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="产品购买要求">
        <el-select
          v-model="regular.accountRequiredId"
          filterable
          clearable
          placeholder="请选择产品购买的开户条件"
        >
          <el-option
            v-for="item in purchaseTypeList"
            :key="item.pId"
            :label="item.description"
            :value="item.pId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="产品上架状态">
        <el-select
          v-model="regular.status"
          filterable
          clearable
          placeholder="当前产品状态"
        >
          <el-option
            v-for="item in productStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否是明星产品">
        <el-select
          v-model="regular.isHot"
          filterable
          clearable
          placeholder="当前产品销售身份状态"
        >
          <el-option
            v-for="item in hotStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="托管人">
        <el-input
          v-model="regular.trustee"
          placeholder="请输入托管人名称 例:中国建设银行股份有限公司"
        />
      </el-form-item>
      <el-form-item label="货币种类">
        <el-input
          v-model="regular.currency"
          placeholder="请输入货币种类 例:人民币"
        />
      </el-form-item>

      <el-form-item label="管理人">
        <el-input
          v-model="regular.custodian"
          placeholder="请输入管理人名称 例: 齐鲁证券(上海)资产管理有限公司"
        />
      </el-form-item>
      <el-form-item label="产品描述">
        <el-input
          v-model="regular.description"
          placeholder="请输入产品描述 例:这是一款值得购买的产品"
        />
      </el-form-item>

      <el-form-item label="产品类型">
        <el-input
          v-model="regular.productType"
          placeholder="请输入产品类型 例:劵商集合资产管理计划"
        />
      </el-form-item>

      <el-form-item label="投资范围">
        <el-input
          v-model="regular.investmentScope"
          placeholder="请输入产品投资范围 例:房地产,金融"
        />
      </el-form-item>

      <el-form-item label="交易手续费费率">
        <el-input
          v-model="regular.procedureRates"
          placeholder="请输入交易手续费费率(小数) 例:0.0035"
        />
      </el-form-item>
      <el-form-item label="存款年利率">
        <el-input
          v-model="regular.yieldRates"
          placeholder="请输入存款利率(小数) 例:0.035"
        />
      </el-form-item>

      <el-form-item label="开售时间">
        <el-date-picker
          v-model="regular.sellStartTime"
          type="datetime"
          placeholder="选择开售日期"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="停售时间">
        <el-date-picker
          v-model="regular.sellEndTime"
          type="datetime"
          placeholder="选择停售日期"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
        <el-button type="info" plain @click="cancleSaveOrUpdate"
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import regularApi from "@/api/regular";
import fundManagerApi from "@/api/manager";
import riskGradeApi from "@/api/riskGrade";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";

export default {
  components: { PanThumb, ImageCropper },
  data() {
    return {
      regular: {}, //定期数据
      managetList: null, //基金经理数据返回集合
      riskGradeList: null, //风险等级返回集合
      purchaseTypeList: null, //购买产品要求返回集合
      productStatus: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 2,
          label: "下架",
        },
      ],
      hotStatus: [
        {
          value: 1,
          label: "明星产品",
        },
        {
          value: 2,
          label: "非明星产品",
        },
      ],
      ownDateList: [
        {
          value: 1,
          label: "短期持有",
        },
        {
          value: 2,
          label: "长期持有",
        },
        {
          value: 3,
          label: "终身持有",
        },
      ],
      saveBtnDisabled: false, // 保存按钮是否禁用,
      imagecropperShow1: false, //头像上传组件是否显示
      imagecropperKey1: 0,
      imagecropperShow2: false, //头像上传组件是否显示
      imagecropperKey2: 0,
      BASE_API: process.env.BASE_API, //获取dev.env.js里面的地址
    };
  },
  created() {
    //页面渲染之前执行
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    },
  },
  methods: {
    close1() {
      //关闭上传头像组件
      this.imagecropperShow1 = false;
      //上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey1 = this.imagecropperKey1 + 1;
    },
    cropSuccess1(data) {
      //上传成功后返回的图片地址
      this.regular.picUrl = data;
      //上传头像成功
      this.imagecropperShow1 = false;
      //上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey1 = this.imagecropperKey1 + 1;
    },
    close2() {
      //关闭上传头像组件
      this.imagecropperShow2 = false;
      //上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey2 = this.imagecropperKey2 + 1;
    },
    cropSuccess2(data) {
      //上传成功后返回的图片地址
      this.regular.endPicUrl = data;
      //上传头像成功
      this.imagecropperShow2 = false;
      //上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey2 = this.imagecropperKey2 + 1;
    },
    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        this.getInfo(id);
        //查询基金经理信息
        this.getFundManagerInfo();
        //查询风险等级
        this.getRiskGradeInfo();
        //查询产品购买要求信息
        this.getPurchaseType();
      } else {
        //路径没有id值，做添加
        //清空表单
        this.regular = {};
        //查询基金经理信息
        this.getFundManagerInfo();
        //查询风险等级
        this.getRiskGradeInfo();
        //查询产品购买要求信息
        this.getPurchaseType();
      }
    },
    //根据id查询的方法,参数1代表已上架状态
    getInfo(id) {
      this.regular.fid = id;
      this.regular.status = 1;
      regularApi.getRegular(this.regular).then((response) => {
        this.regular = response.data;
      });
    },
    getFundManagerInfo() {
      fundManagerApi.getManagetInfo().then((response) => {
        this.managetList = response.data;
      });
    },
    getRiskGradeInfo() {
      riskGradeApi.getRiskGrade().then((response) => {
        this.riskGradeList = response.data;
      });
    },
    getPurchaseType() {
      riskGradeApi.getPurchaseType().then((response) => {
        console.log("购买要求,", response);
        this.purchaseTypeList = response.data;
      });
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据轮播图对象是否有id
      if (!this.regular.fid) {
        //添加
        this.saveRegular();
      } else {
        //修改
        this.updateRegular();
      }
    },
    //修改定期的方法
    updateRegular() {
      regularApi.updateRegular(this.regular).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //判断当前产品状态,来决定跳转哪一个页面
        if (this.regular.status == 1) {
          //回到列表页面 路由跳转
          this.$router.push({ path: "/list/regular" });
        } else if (this.regular.status == 2) {
          //回到已下架列表页面 路由跳转
          this.$router.push({ path: "/list/recycleRegular" });
        }

        //this.getList();
      });
    },
    //添加定期的方法
    saveRegular() {
      regularApi.addRegular(this.regular).then((response) => {
        //添加成功
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //判断当前产品状态,来决定跳转哪一个页面
        if (this.regular.status == 2) {
          //回到已下架列表页面 路由跳转
          this.$router.push({ path: "/list/recycleRegular" });
        } else {
          //回到列表页面 路由跳转
          this.$router.push({ path: "/list/regular" });
        }
      });
    },
    //取消操作
    cancleSaveOrUpdate() {
      //判断当前产品状态,来决定跳转哪一个页面
      if (this.regular.status == 2) {
        //回到已下架列表页面 路由跳转
        this.$router.push({ path: "/list/recycleRegular" });
      } else {
        this.$router.push({ path: "/list/regular" });
      }
    },
  },
};
</script>
